<template>
  <div class="main">
    <el-container>
      <el-header height="76px">
        <div class="header">
          <div class="title-text">信息填报系统</div>
          <div class="right-box">
            <NowDay></NowDay>
            <div class="logout-btn" @click="handleLogout">
              <img src="@/assets/images/header/logoutIcon.png" alt="" />
            </div>
          </div>
        </div>
      </el-header>
      <el-container class="main-body">
        <el-aside width="407px" ref="elAsideRef">
          <div class="top-box">
            <div class="top-aside">
              <div class="title">信息列表</div>
              <div class="add-btn" @click="handleAdd">
                <img src="@/assets/images/infoList/addBtn.png" alt="" />
              </div>
            </div>
            <div class="date-picker-item">
              <el-date-picker
                v-model="dateValue"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-value="[new Date(), new Date()]"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="line-class"></div>
          <div class="bottom-box">
            <div class="table-box">
              <el-table
                ref="infoTableRef"
                v-loading="loading"
                element-loading-text="疯狂加载中..."
                element-loading-background="#F6F6F6"
                :data="tableData"
                height="45vh"
                style="width: 100%"
                highlight-current-row
                @row-click="handleTableItem"
              >
                <el-table-column prop="date" label="日期" />
                <el-table-column prop="name" label="人员" />
              </el-table>
            </div>
            <div class="pagination-class">
              <el-pagination
                background
                :pager-count="5"
                layout="prev, pager, next"
                :total="30"
              />
            </div>
          </div>
        </el-aside>
        <el-main>
          <DetailTable :tableDetailData="tableDetailData"></DetailTable>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog v-model="dialogFormVisible" title="新增填报">
      <el-form :model="form">
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            :default-value="new Date()"
          />
        </el-form-item>
        <el-form-item label="人员">
          <el-input
            class="man-class"
            v-model="form.name"
            placeholder="填写人员"
          />
        </el-form-item>
        <el-form-item label="文件">
          <div class="file-item">
            <div class="file-class">
              <span>点击右侧图标选择上传文件</span>
            </div>
            <div class="upload-img-btn">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :on-exceed="handleExceed"
              >
                <template #trigger>
                  <img src="@/assets/images/infoList/uploadBtn.png" alt="" />
                </template>
              </el-upload>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div class="quit-btn" @click="dialogFormVisible = false">
            <div class="btn-img">
              <img src="@/assets/images/detail/quitBtn.png" alt="" />
            </div>
            <div>取消</div>
          </div>
          <div class="save-btn" @click="handleDialogSaveBtn">
            <div class="btn-img">
              <img src="@/assets/images/detail/saveBtn.png" alt="" />
            </div>
            <div>保存</div>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { nextTick, ref, reactive, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { genFileId } from 'element-plus'
import DetailTable from '../../components/detailTable.vue'
import NowDay from '../../components/nowDay.vue'

const elAsideRef = ref(null)
// 日期选择数据
const dateValue = ref('')
// 信息列表数据
const tableData = ref([])
const loading = ref(true)
const infoTableRef = ref(null)
// 弹出层 表单
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  date: '',
  name: '',
  file: '',
})
const handleDialogSaveBtn = () => {
  ElMessage({
    dangerouslyUseHTMLString: true,
    type: 'success',
    message: "<p><strong style='color:tomato'>保存</strong> 成功</p>",
  })
  dialogFormVisible.value = false
}
const upload = ref(null)
const handleExceed = (files) => {
  if (upload.value !== '') {
    upload.value.clearFiles()
  }
  const file = files[0]
  file.uid = genFileId()
  if (upload.value !== '') {
    upload.value.handleStart(file)
  }
}
// const submitUpload = () => {
//   if (upload.value !== '') {
//     upload.value.submit()
//   }
// }
// 详情 table 数据
const tableDetailData = ref([
  {
    monitoringSection: '引黄北干线1#隧洞',
    averageTrafficYesterday: '4.83',
    waterAmountYesterday: '2.00',
    cumulativeWater: '3.00',
    warehouse: '3.00',
    waterStorage: '3.00',
    totalStorageCapacity: '3.00',
    eightHourTraffic: '3.00',
    eightHourFlowRate: '3.00',
  },
  {
    monitoringSection: '引黄北干线2#隧洞',
    averageTrafficYesterday: '4.83',
    waterAmountYesterday: '2.00',
    cumulativeWater: '3.00',
    warehouse: '3.00',
    waterStorage: '3.00',
    totalStorageCapacity: '3.00',
    eightHourTraffic: '3.00',
    eightHourFlowRate: '3.00',
  },
])

//登出按钮
const handleLogout = () => {
  console.log('点击了登出按钮')
}

// 信息列表 添加按钮
const handleAdd = () => {
  dialogFormVisible.value = true
}
// 点击了 信息列表的 某一行 方法
const handleTableItem = (row, column, event) => {
  tableDetailData.value = []
  console.log('选择了该条数据', row, column, event)
}

// 监听事件
watch(
  // 信息列表 监听 日期选择
  () => dateValue.value,
  (newValue) => {
    if (newValue === null) {
      console.log('清除了日期 调当前日期的接口')
    } else {
      console.log(
        '填写了日期 去调接口：',
        '开始日期：',
        newValue[0],
        '结束日期：',
        newValue[1]
      )
    }
  }
)
onMounted(() => {
  setTimeout(() => {
    //模拟接口请求 改变tableData数据
    // tableData.value = [];
    console.log(elAsideRef)
    tableData.value = [
      {
        date: '2016-05-03',
        name: '李晓芮',
      },
      {
        date: '2016-05-02',
        name: '邓轩杰',
      },
      {
        date: '2016-05-04',
        name: '宋紫北',
      },
      {
        date: '2016-05-01',
        name: '李玉云',
      },
      {
        date: '2016-05-03',
        name: '李晓芮',
      },
      {
        date: '2016-05-02',
        name: '邓轩杰',
      },
      {
        date: '2016-05-04',
        name: '宋紫北',
      },
      {
        date: '2016-05-01',
        name: '李玉云',
      },
      {
        date: '2016-05-03',
        name: '李晓芮',
      },
      {
        date: '2016-05-02',
        name: '邓轩杰',
      },
      {
        date: '2016-05-04',
        name: '宋紫北',
      },
      {
        date: '2016-05-01',
        name: '李玉云',
      },
      {
        date: '2016-05-03',
        name: '李晓芮',
      },
      {
        date: '2016-05-02',
        name: '邓轩杰',
      },
      {
        date: '2016-05-04',
        name: '宋紫北',
      },
      {
        date: '2016-05-01',
        name: '李玉云',
      },
    ]
    loading.value = false
  }, 3000)
})
watch(
  // 信息列表 监听 tableData数据变化 高亮第一行
  () => tableData.value,
  (newValue) => {
    console.log('改变了', newValue)
    if (newValue.length > 0) {
      nextTick(() => {
        // 设置了当前选中的 第一行高亮
        infoTableRef.value.setCurrentRow(tableData.value[0])
        // 请求当前选中的数据
        console.log('拿到当前列表第一条数据', tableData.value[0])
      })
    } else {
      console.log('当前列表为空')
    }
  },
  { deep: true }
)
</script>

<style scoped lang="less">
/* 用单文件组件样式的特性（状态驱动的动态 CSS | v-bind(var) )时，值需要用引号包裹起来，避免被stylelint所格式化 */
.main {
  width: 100vw;
  height: 100vh;
  background: #f6f6f6;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  &:deep(.el-header) {
    background: #fff;
    padding: 0 30px;
  }
  &:deep(.el-aside) {
    height: calc(100vh - 136px);
    background: #fff;
    border-radius: 8px 8px 8px 8px;
    margin-right: 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    // padding: 30px;
  }
  &:deep(.el-main) {
    height: calc(100vh - 136px);
    background: #fff;
    border-radius: 8px 8px 8px 8px;
    padding: 30px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 74px;
    .title-text {
      font-size: 22px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #666666;
    }
    .right-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .now-time {
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #666666;
        margin-right: 60px;
      }
      .logout-btn {
        width: 35px;
        height: 35px;
        cursor: pointer;
      }
    }
  }
  .main-body {
    margin: 30px;
    .top-box {
      padding: 30px;
    }
    .bottom-box {
      padding: 30px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
    .top-aside {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 18px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #666666;
      }
      .add-btn {
        width: 27px;
        height: 27px;
        cursor: pointer;
      }
    }
    .date-picker-item {
      margin-top: 30px;
      //   height: 44px;
      &:deep(.el-date-editor--daterange) {
        height: 44px;
        background: #f2f3f5;
        border-radius: 6px 6px 6px 6px;
        box-shadow: none;
      }
      // 修改默认值样式
      ::-webkit-input-placeholder {
        color: #666666;
      } /* 使用webkit内核的浏览器 */
      ::-moz-placeholder {
        color: #666666;
      } /* Firefox版本19+ */
      :-moz-placeholder {
        color: #666666;
      } /* Firefox版本4-18 */
      :-ms-input-placeholder {
        color: #666666;
      } /* IE浏览器 */

      &:deep(.el-date-editor .el-range-input) {
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #666666;
        position: relative;
        left: -20px;
      }
      &:deep(.el-date-editor .el-range-separator) {
        // color: #666666;
        color: #f2f3f501;
        position: relative;
        left: -20px;
        width: 15px;
        height: 1px;
        flex: none;
        background-color: #c4c4c4;
        &::after {
          display: inline-block;
        }
      }
      &:deep(.el-date-editor--daterange .el-range__icon) {
        position: absolute;
        right: 20px;
        font-size: 24px;
        color: #666666;
      }
      &:deep(.el-date-editor--daterange .el-range__close-icon) {
        position: relative;
        right: 25px;
        font-size: 24px;
        color: #666666;
      }
    }
    .line-class {
      width: 100%;
      height: 1px;
      background: #f6f6f6;
    }
    .table-box {
      &:deep(.el-table__inner-wrapper) {
        .el-table__header-wrapper {
          background: #f4f8ff;
          border-radius: 4px;
          margin-bottom: 3px;
        }
      }
      &:deep(.el-table thead) {
        background-color: transparent;
      }
      &:deep(.el-table tr) {
        background: #f4f8ff;
        background-color: transparent;
      }
      &:deep(.el-table th.el-table__cell) {
        border-bottom: none;
        background-color: transparent;
        font-size: 14px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #666666;
      }
      &:deep(.el-table__body-wrapper .current-row > td.el-table_1_column_1) {
        border-radius: 4px 0 0 4px;
      }
      &:deep(.el-table__body-wrapper .current-row > td.el-table_1_column_2) {
        border-radius: 0 4px 4px 0;
      }
      &:deep(.el-table--enable-row-hover
          .el-table__body
          tr:hover
          > td.el-table_1_column_1) {
        border-radius: 4px 0 0 4px;
      }
      &:deep(.el-table--enable-row-hover
          .el-table__body
          tr:hover
          > td.el-table_1_column_2) {
        border-radius: 0 4px 4px 0;
      }
      &:deep(.el-table--enable-row-transition
          .el-table__body
          td.el-table__cell) {
        transition: none;
        background-color: transparent;
        cursor: pointer;
      }
      &:deep(.bottom-box
          .el-table--enable-row-hover
          .el-table__body
          tr:hover
          > td.el-table__cell) {
        // background-color: transparent;
        background-color: #0057ff;
        color: #ffffff;
        // .el-table_1_column_1 {
        //   border-radius: 4px 0 0 4px;
        // }
        // .el-table_1_column_2 {
        //   border-radius: 0 4px 4px 0;
        // }
      }
      &:deep(.el-table__body-wrapper .el-table__row) {
        font-size: 14px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }
      &:deep(.el-table__body-wrapper .current-row) {
        background: #0057ff !important;
        color: #fff;
        border-radius: 4px;
      }
      //   .el-table__body tr.current-row > td {
      //     background-color: #0057ff !important;
      //     color: #000000;
      //     font-weight: 700;
      //   }
    }
    .pagination-class {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      &:deep(.el-pagination.is-background
          .el-pager
          li:not(.is-disabled).is-active) {
        background-color: #0057ff;
      }
      &:deep(.el-pagination.is-background
          .el-pager
          li:not(.is-disabled):hover) {
        color: #666666;
        background: #e5eeff;
      }
      &:deep(.el-pagination.is-background
          .el-pager
          li:not(.is-disabled).is-active:hover) {
        background-color: #0057ff;
        color: var(--el-color-white) !important;
      }
    }
  }

  // 弹出层样式
  &:deep(.el-dialog) {
    width: 626px;
    height: 414px;
    border-radius: 8px;
  }
  &:deep(.el-dialog__header) {
    padding: 30px;
    font-size: 18px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #666666;
  }
  &:deep(.el-dialog__body) {
    padding: 0px 149px 60px 115px;
  }
  &:deep(.el-dialog__body .el-form .el-form-item) {
    align-items: center;
  }
  &:deep(.el-dialog__body .el-form .el-form-item .el-form-item__label) {
    font-size: 16px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #666666;
    padding-right: 30px;
  }
  &:deep(.el-dialog__body
      .el-form
      .el-form-item
      .el-form-item__content
      .el-input__inner) {
    width: 300px;
    height: 44px;
    font-size: 16px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #333333;
  }
  &:deep(.el-dialog__body
      .el-date-editor.el-input, .el-date-editor.el-input__inner) {
    width: 300px;
    box-shadow: none;
  }
  &:deep(.el-dialog__body .el-form .el-input__inner) {
    box-shadow: none;
    border-radius: 4px;
    background: #f2f3f5;
  }
  &:deep(.el-dialog__body .el-form .man-class .el-input__inner) {
    background: #fcfcfc;
  }
  &:deep(.el-dialog__body .el-form .man-class .el-input__inner:hover) {
    background: #fcfcfc;
  }
  &:deep(.el-dialog__body .el-form .el-input__inner:hover) {
    box-shadow: none;
    border-radius: 4px;
    background: #f2f3f5;
  }
  &:deep(.el-dialog__body .el-form .el-input__prefix) {
    display: none;
  }
  &:deep(.el-dialog__headerbtn) {
    display: none;
  }
  .file-item {
    display: flex;
    align-items: center;
    .file-class {
      width: 300px;
      height: 44px;
      display: flex;
      // justify-content: center;
      align-items: center;
      background: #f2f3f5;
      border-radius: 4px;
      padding-left: 10px;
      span {
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }
    }
    .upload-img-btn {
      margin-left: 10px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      user-select: none;
    }
  }
  &:deep(.el-dialog__footer) {
    padding-top: 0;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    .btn-img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    .quit-btn,
    .save-btn {
      width: 106px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      font-size: 16px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
    }
    .quit-btn {
      background: #f2f3f5;
      color: #666666;
      margin-right: 60px;
    }
    .save-btn {
      background: #0057ff;
      color: #ffffff;
    }
  }
  &:deep(.el-overlay) {
    z-index: 2000 !important;
  }
}
</style>
